<template>
  <el-dialog
      v-model="dialogVisible"
      title="阻塞信息"
      width="50%"
  >
    <el-container>
      <el-main>
        <el-descriptions title="阻塞路段详情" direction="horizontal" :column="2" border >
          <el-descriptions-item label="阻塞时间选择器" :span="2"><declareSlot @sentTime="getTime"></declareSlot></el-descriptions-item>
          <el-descriptions-item label="开始时间" ><el-input disabled="true" v-model="blockData.beginDate"></el-input></el-descriptions-item>
          <el-descriptions-item label="结束时间" ><el-input disabled="true" v-model="blockData.endDate"></el-input></el-descriptions-item>
          <el-descriptions-item label="阻塞方向" ><el-input v-model="blockData.direction"></el-input></el-descriptions-item>
          <el-descriptions-item label="原因" ><el-input v-model="blockData.reason"></el-input></el-descriptions-item>
        </el-descriptions>

      </el-main>

    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="addBlocked">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <div id="tanc_road">
    <div class="routeHeader">
      <b>推荐路线详情</b>
      <el-button @click="closeTanc" type="danger" circle size="small" style="float: right"><el-icon><CloseBold /></el-icon></el-button>
    </div>
    <roads-child @dele="closeTanc" :segId="currentVO.segId" :blockedSegId="currentVO.blockedSegId" :beginDate="currentVO.beginDate" :endDate="currentVO.endDate" :direction="currentVO.direction" :reason="currentVO.reason" v-if="isDetail" @wrong="closeTanc"></roads-child>
  </div>

  <el-container>
    <el-header class="auditor_header">
        推荐路线
    </el-header>
    <el-main>
<!--      <el-row>-->
<!--&lt;!&ndash;        <el-col :span="4">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="inputID" placeholder="请输入路线序号" />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-col :span="4">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-button type="warning" @click="showDetail(this.inputID)">&ndash;&gt;-->
<!--&lt;!&ndash;            查询&ndash;&gt;-->
<!--&lt;!&ndash;          </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-col>&ndash;&gt;-->
<!--        <el-col :span="4">-->
<!--          <el-button type="primary" @click="addRoad">-->
<!--            新添推荐路线-->
<!--          </el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-table :data="roadsData" stripe border style="width: 100%;height: 480px;">
        <el-table-column  label="序号"  >
          <template #default="scope">
            {{number(scope.row.no)}}
          </template>
        </el-table-column>

        <el-table-column prop="suggestRoad" label="路线" />
        <el-table-column prop="beginName" label="起点" />
        <el-table-column prop="endName" label="终点"  />
        <el-table-column prop="passCities" label="途径州市"  />

        <el-table-column  label="是否阻塞"  width="200px">
          <template #default="scope">
            {{ m(scope.row.roadStatus) }}

          </template>

        </el-table-column>
        <el-table-column  label="操作" width="300px">
          <template #default="scope">
            <el-button v-if="!scope.row.roadStatus" size="small" type="primary" @click="showDetail(scope.row.blockVO)">查看阻塞信息</el-button>
            <el-button v-if="scope.row.roadStatus" size="small" type="primary" @click="showDetailBlocked(scope.row.blockVO,scope.row.roadStatus,scope.row.roadsId)">新增阻塞信息</el-button>
<!--            <el-button  size="small" type="primary" @click="showDetail(scope.row.roadsId)">查看详情</el-button>-->
            <el-popconfirm title="确定要删除吗?" @confirm="deleteRoad(scope.row.roadsId)">
              <template #reference>
                <el-button size="small" type="danger">删除推荐路线</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[5,10,15,20]"
          @size-change="changePage"
          @current-change="changePage"
      />
    </el-footer>
  </el-container>

<div id="hidebg"></div>
</template>

<script>
import axios from "axios";
import roadsChild from "@/router/administrator/updateRoad/roadsChild";
import {ElMessage} from "element-plus";
import declareSlot from "@/router/driver/declareSlot";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "roads",
  components:{
    roadsChild,
    declareSlot
  },
  data(){
    return{
      dialogVisible:false,
      inputID:'',
      roadsData:[],
      total: 0,
      currentPage:1,
      pageSize:5,
      isDetail:false,
      currentVO: {},
      addDialogVisible:false,
      formData:{
        passCities: "",
        roadBegin: "",
        roadComment: "",
        roadCost: "",
        roadEnd: "",
        roadStatus: "",
        suggestRoad: "",
        totalMileage: "",
        truchWidth: "",
        truckAxes: "",
        truckHeight: "",
        truckLength: "",
        truckTyres: "",
        truckWeight: "",
      },
      blockData:{
        segId:0,
        beginDate:'',
        endDate:'',
        direction:'',
        reason:'',
      }
    }
  },
  mounted() {
    this.changePage()
  },
  methods:{
    number(a){
      return a+(this.currentPage-1)*this.pageSize
    },
    getTime:function (data){
      let yy1 =data[0].getFullYear();
      let mm1 =data[0].getMonth()+1;
      if(mm1<10){
        mm1='0'+mm1
      }
      let dd1 =data[0].getDate();
      if(dd1<10){
        dd1='0'+dd1
      }
      let hour1=data[0].getHours();
      let minute1=data[0].getMinutes();
      let second1=data[0].getSeconds();
      if(hour1<10){
        hour1='0'+hour1
      }
      if(second1<10){
        second1='0'+second1
      }
      if(minute1<10){
        minute1='0'+minute1
      }
      let yy2 =data[1].getFullYear();
      let mm2 =data[1].getMonth()+1;
      if(mm2<10) {
        mm2 = '0'+mm2
      }
      let dd2 =data[1].getDate();
      if(dd2<10){
        dd2='0'+dd2
      }
      let hour2=data[1].getHours();
      let minute2=data[1].getMinutes();
      let second2=data[1].getSeconds();
      if(hour2<10){
        hour2='0'+hour2
      }
      if(second2<10){
        second2='0'+second2
      }
      if(minute2<10){
        minute2='0'+minute2
      }
      this.blockData.beginDate=yy1+'-'+mm1+'-'+dd1+' '+hour1+":"+minute1+":"+second1;
      this.blockData.endDate=yy2+'-'+mm2+'-'+dd2+' '+hour2+":"+minute2+":"+second2;
    },
    addBlocked(){
      if(this.blockData.reason!==''&&this.blockData.endDate!==''&&this.blockData.beginDate!==''&&this.blockData.direction!==''){
        axios({
          method: 'post',
          url: '/api/road/addBlockedSegs',
          data:{
            segId:this.blockData.segId,
            beginDate:this.blockData.beginDate,
            endDate:this.blockData.endDate,
            direction:this.blockData.direction,
            reason:this.blockData.reason,
          }
        })
            .then((res)=>{
              if(res.data.code==="1"){//返回成功
                // alert("更新成功")
                ElMessage.success('该路线设为阻塞')
                this.dialogVisible=false
                this.changePage()
              }else{//返回失败
                // alert("更新失败")
                ElMessage.error('该路线设为阻塞失败')
              }
            });
      }else{
        ElMessage.warning("请填写完整信息")
      }
    },
    m(a){
      if(a===true)return "否"
      else return "是"
    },
    showDetailBlocked(a,b,c){
      if(b===true){
      //    输入阻塞信息
        this.blockData.segId=c
        this.blockData.reason=''
        this.blockData.endDate=''
        this.blockData.direction=''
        this.blockData.beginDate=''
        this.dialogVisible=true

      }else{
      //设为不阻塞，删除阻塞
        axios({
          method: 'post',
          url: '/api/road/deleteBlockedSegs',
          data:{
            blockedSegId:a.blockedSegId,
            segId:a.segId
          }
        })
            .then((res)=>{
              if(res.data.code==="1"){//返回成功
                // alert("更新成功")
                ElMessage.success('该路线设为不阻塞')
                this.changePage()
              }else{//返回失败
                // alert("更新失败")
                ElMessage.error('该路线设为不阻塞失败')
              }
            });
      }
    },
    closeTanc(){
      document.getElementById('hidebg') .style.display='none'
      document.getElementById('tanc_road') .style.display='none'
      this.changePage()
      this.isDetail=false
    },

    showDetail(a){//展示详情页

        this.currentVO=a

        var hideobj=document.getElementById("hidebg");
        hideobj.style.display="block";  //显示隐藏层
        //hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
        document.getElementById("tanc_road").style.display="block";  //显示弹出层
        this.isDetail=true

    },
    deleteRoad(a){//删除
      axios({
        method: 'post',
        url: '/api/road/deleteRoad',
        data: {
          roadsId:a
        },

      })
          .then((res)=>{
            if(res.data.code==="1"){
              // alert("删除成功")
              ElMessage.success('删除成功')
              this.changePage()
            }else{
              // alert("删除失败")
              ElMessage.error('删除失败')
            }
          });
    },
    changePage(){
      axios({
        method: 'post',
        url: '/api/road/showRoad',
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        },

      })
          .then((res)=>{
            this.roadsData=res.data.data.roadsList
            for(var i=0;i<this.roadsData.length;i++){
              this.roadsData[i]['no']=i+1;
            }
            this.total=res.data.data.total
          });
    }
  }
}
</script>

<style scoped>

.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-main{
  height: 80%;
  width:100%;
}
.el-footer{
  text-align: center;
  position: relative;
  bottom: 0px;
}
.el-row{
  margin-bottom: 20px !important;
}
.el-pagination{
  justify-content: center !important;
}
#hidebg {
  position:absolute;
  left:0px;
  top:0px;
  background-color: #888787;
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  display:none;
  z-Index:10;
}
#tanc_road{
  display: none;
  transform: translate(-50%,-50%);
  height: 600px;
  width: 700px;
  left: 50%;
  top:50%;
  position: absolute;
  z-index: 11;
  background-color: white;
  border: #222222 solid 1px;
}
.routeHeader{
  background-color: #409EFF;
  height: 25px;
  text-align: center;
  padding: 5px;
}
</style>